<template>
	<view class="" style="width: 95%;margin: auto;margin-top: 20rpx" v-if="itemData.data.product_list.length>0">
		<!-- 滑动样式 -->
		<view v-if="itemData.style.display === 'slide'">
			<view style="width: 98%;">
			    <view style="height: 96rpx;overflow: hidden;border-radius:0 15rpx 0 0;display: flex;">
			        <view style="display: flex;align-items: center;width: 30%;position: relative">
			            <view>
			                <image src="/static/images/bargin/left.png" style="width: 300rpx;position: absolute;top: 0;left: 0" mode="widthFix"></image>
			            </view>
			            <view style="position: absolute;left: 0;display: flex;align-items: center;margin-left: 10rpx">
			                <view>
			                    <image src="/static/images/group/fire.png" style="width: 40rpx;" mode="widthFix"></image>
			                </view>
			                <view>
			                    <image src="/static/images/bargin/word.png" style="width: 130rpx;margin-left: 10rpx" mode="widthFix"></image>
			                </view>
			            </view>
			        </view>
			        <view class="fsc" style="background:linear-gradient(to bottom,#a51fc6,#b42eaa);width: 70%;border-radius: 0 15rpx 0 0;padding: 0 20rpx;margin-top: 10rpx">
			            <view style="margin-left: 60rpx">
			                <u-count-down  separator="colon" color="#AF21CE" separator-color="white" font-size="25" separator-size="25" height="45" :timestamp="diftime"></u-count-down>
			            </view>
			            <view @click="gotoList" style="color: rgba(255,255,255,0.47)">
			                更多
			                <image src="/static/images/group/arrow.png" style="width: 25rpx;margin-left: 10rpx;display: inline-block" mode="widthFix"></image>
			            </view>
			        </view>
			    </view>
			</view>
			<view style="background-color: white;border-radius: 0 15rpx 0 15rpx;">
			    <scroll-view scroll-x="true" style="white-space: nowrap">
			        <block v-for="(item, index) in itemData.data.product_list" :key="index">
			            <view style="width: 40%;display: inline-block;;margin: 20rpx" @click="gotoDetail(item.bargain_product_id)">
			                <view style="position: relative">
			                    <image :src="item.product.file_path" style="width: 100%;height: 260rpx;border-radius: 10rpx" mode="aspectFill"></image>
			                    <view class="product-title linedot" style="margin-top: 10rpx" v-if="itemData.style.show.productName == '1'">{{ item.product.product_name }}</view>
			                    <view class="product-price" v-if="itemData.style.show.floorPrice == '1'">
			                        <text class="red" style="font-size: 32rpx">¥</text>
			                        <text class="red" style="font-size: 32rpx">{{ item.bargain_price }}</text>
			                        <text class="ml20 gray9 text-d-line f20" v-if="itemData.style.show.originalPrice == '1'">¥</text>
			                        <text class="gray9 f24 text-d-line" v-if="itemData.style.show.originalPrice == '1'">{{ item.product_price }}</text>
			                    </view>
			                </view>
			                <view class="hlbbutton" style="height: 56rpx;width: 240rpx;line-height: 56rpx;color: white;background-color: #AF21CE">
			                    立即砍价
			                </view>
			            </view>
			        </block>
			    </scroll-view>
			</view>
			
			<!--<view class="bargainProduct-head d-b-c">
			    <view class="left d-s-c">
			        <view class="name color_bargain d-c-c">
			            活动砍价
			        </view>
			        <view class="datetime d-s-c ml20">
			            <Countdown :config="countdownConfig"></Countdown>
			        </view>
			    </view>
			    <view class="right" @click="gotoList">
			        <text class="f26 color_bargain">更多</text>
			        <text class="iconfont icon-jiantou" style="font-size: 22rpx;margin-left: 4rpx;color: #6450FF;"></text>
			    </view>
			</view>
			<view class="bargainProduct-body">
			    <scroll-view scroll-x="true">
			        <view class="product-list column__3">
			            <view class="product-item" v-for="(item, index) in itemData.data.product_list" :key="index"  @click="gotoDetail(item.bargain_product_id)">
			                &lt;!&ndash; 两列三列 &ndash;&gt;
			                <template>
			                    <view class="p20 gray9 f24">已抢{{item.product.product_sales}}件</view>
			                    <view class="product-cover">
			                        <image :src="item.product.file_path" mode="aspectFit"></image>
			                    </view>
			                    <view class="product-info p-0-10">
			                        <view v-if="itemData.style.show.productName == '1'" class="product-title">{{ item.product.product_name }}</view>
			                        <view class="price d-c-c p-20-0 f20">
			                            <view v-if="itemData.style.show.floorPrice == '1'" class="redF6">
			                                <text>¥</text>
			                                <text class="f32 fb">{{ item.bargain_price }}</text>
			                            </view>
			                            <view class="ml10 gray9 text-d-line" v-if="itemData.style.show.originalPrice == '1'">
			                                <text class="f20">¥</text>
			                                <text class="f24">{{ item.product_price }}</text>
			                            </view>
			                        </view>
			                        <view>
			                            <view class="bargain_btn">立即砍价</view>
			                        </view>
			                    </view>
			                </template>
			            </view>
			        </view>
			    </scroll-view>
			</view>-->
		</view>
		
		<!-- 大图样式 -->
		<view v-else>
			<view class="diy-activity-bargain">
				<view class="bargain-header-left">
					<view>
						<image src="/static/images/group/fire.png" style="width: 40rpx;" mode="widthFix"></image>
					</view>
					<view>
						<image src="/static/images/bargin/word.png" style="width: 130rpx;margin-left: 6rpx" mode="widthFix"></image>
					</view>
				</view>
				<view class="bargain-header-right" @click="gotoList">
					查看全部
					<image src="/static/images/group/arrow_right.png" style="width: 24rpx;margin-left: 6rpx;" mode="widthFix"></image>
				</view>
			</view>
			<view class="diy-activity-product-list">
				<block v-for="(item, index) in itemData.data.product_list" :key="index">
					<view class="activity-product-item" @click="gotoDetail(item.bargain_product_id)">
						<view class="activity-product-cover">
							<image :src="item.product.file_path" style="width: 100%;" mode="widthFix"></image>
							<view class="hover-tip">
								<text class="end">距结束</text>
								<text class="line">|</text>
								<view class="time">
									<u-count-down separator-size="22" separator-color="#FFDE07" font-size="26" color="#FFDE07" bg-color="none" :timestamp="diftime"></u-count-down>
								</view>
							</view>
						</view>
						<view class="activity-product-info">
							<view class="bargain-title">
								<view v-if="itemData.style.show.productName == '1'" class="title linedot">{{ item.product.product_name }}</view>
								<view v-if="itemData.style.show.originalPrice == '1'" class="line-price">原价: <text class="text-d-line">¥{{ item.product_price }}</text></view>
							</view>
							<view class="bargain-price">
								<view class="price-left">
									<view class="price-info">
										<view v-if="itemData.style.show.floorPrice == '1'" class="symbol-price">
											<text class="symbol">¥</text>
											<text class="price">{{ item.bargain_price }}</text>
										</view>
										<view v-if="item.product_price > 0 && item.bargain_price > 0" class="discount-num">
											<view class="left-text">砍价</view>
											<view class="right-num">{{ (item.bargain_price / item.product_price * 10).toFixed(0) }}折</view>
										</view>
									</view>
									<view class="progress">
										<u-line-progress active-color="#AF21CE" inactive-color="#F4E7F6" height="12" :show-percent="false" :percent="20"></u-line-progress>
									</view>
								</view>
								<view class="bargain-button">立即砍价</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
import Countdown from '@/components/countdown/countdown.vue';

export default {
	components: {
		Countdown
	},
	data() {
		return {
			/*倒计时配置*/
			countdownConfig: {
				/*开始时间*/
				startstamp: 0,
				/*结束时间*/
				endstamp: 0,
				/*标题*/
				title: ' '
			},
			diftime: 0
		};
	},
	props: ['itemData'],
	created() {
		this.countdownConfig.endstamp = this.itemData.data.end_time;
		this.countdownConfig.startstamp = this.itemData.data.start_time;
		this.diftime = this.countdownConfig.endstamp - Date.parse(new Date()) / 1000;
	},
	methods: {
		scroll(e) {},
		/*跳转列表*/
		gotoList() {
			let url = '/pages/plus/bargain/list/list';
			this.gotoPage(url);
		},
		/*跳转详情*/
		gotoDetail(e) {
			let url = '/pages/plus/bargain/detail/detail?bargain_product_id=' + e;
			this.gotoPage(url);
		}
	}
};
</script>

<style lang="scss">
	.color_bargain {
		color: #4B30FF;
	}

	.diy-bargainProduct {
		margin: 20rpx;
		border-radius: 12rpx;
		padding: 0 24rpx 24rpx;
		background: #EBE8FF;
	}

	.bargainProduct-head {
		height: 100rpx;
	}

	.bargainProduct-head .name {
		font-size: 32rpx;
		font-weight: bold;
	}

	.bargainProduct-head .datetime::v-deep>span {
		display: inline-block;
	}

	.bargainProduct-head .datetime::v-deep text {
		font-size: 24rpx;
		color: #4B30FF;
	}

	.bargainProduct-head .datetime::v-deep .box {
		padding: 4rpx 10rpx;
		font-size: 22rpx;
		background: #FFFFFF;
		color: #4B30FF;
	}

	.diy-bargainProduct .product-list image {
		width: 100%;
		height: 100%;
	}

	.diy-bargainProduct .product-list .product-title {
		margin-top: 32rpx;
		height: 40rpx;
		line-height: 40rpx;
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		font-size: 30rpx;
	}

	.diy-bargainProduct .product-list .price {
		height: 24rpx;
		line-height: 24rpx;
	}

	.diy-bargainProduct .product-list.column__3 {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
	}

	.diy-bargainProduct .column__3 .product-item {
		width: 300rpx;
		margin-right: 20rpx;
		background: #ffffff;
		border-radius: 12rpx;
		flex-shrink: 0;
	}

	.diy-bargainProduct .column__3 .product-cover {
		width: 170rpx;
		height: 170rpx;
		margin: 0 auto;
	}

	.bargain_btn {
		width: 175rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		background: linear-gradient(90deg, #7776FF 0%, #762CF1 100%);
		border-radius: 20rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		margin: 0 auto;
		margin-bottom: 36rpx;
	}
	
	/* 大图样式 */
	.diy-activity-bargain {
		height: 40rpx;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		
		.bargain-header-left {
			display: flex;
			align-items: center;
		}
		
		.bargain-header-right {
			color: #6E6E6E;
			font-size: 24rpx;
			line-height: 24rpx;
			display: flex;
			align-items: center;
		}
	}
	
	.diy-activity-product-list {
		.activity-product-item {
			background-color: white;
			border-radius: 20rpx;
			height: 508rpx;
			margin-bottom: 30rpx;
			overflow: hidden;
			
			.activity-product-cover {
				height: 320rpx;
				overflow: hidden;
				position: relative;
				
				.hover-tip {
					position: absolute;
					top: 0;
					left: 0;
					background-color: rgba(0, 0, 0, 0.5);
					padding: 10rpx 24rpx;
					border-radius: 20rpx 0 20rpx 0;
					
					.end {
						color: #ffffff;
						font-size: 26rpx;
						line-height: 36rpx;
					}
					
					.line {
						color: #ffffff;
						font-size: 26rpx;
						line-height: 36rpx;
						margin: 0 8rpx;
					}
					
					.time {
						line-height: 36rpx;
						display: inline-block;
					}
				}
			}
			
			.activity-product-info {
				height: 188rpx;
				padding: 20rpx;
				
				.bargain-title {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					
					.title {
						font-family: PingFang SC;
						font-size: 32rpx;
						color: #1B1B1B;
						line-height: 36rpx;
						font-weight: 500;
						margin-right: 40rpx;
					}
					
					.line-price {
						flex-shrink: 0;
						font-family: PingFang SC;
						font-size: 24rpx;
						color: #C4C4C4;
						line-height: 36rpx;
					}
				}
				
				.bargain-price {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 30rpx;
					
					.price-left {
						margin-right: 20rpx;
						
						.price-info {
							display: flex;
							align-items: center;
							
							.symbol-price {
								.symbol {
									font-size: 28rpx;
									font-family: PingFang SC;
									font-weight: 500;
									line-height: 36rpx;
									color: #AF21CE;
								}
								
								.price {
									font-size: 40rpx;
									font-family: SF Pro Display;
									font-weight: bold;
									line-height: 36rpx;
									color: #AF21CE;
									margin-left: 4rpx;
								}
							}
							
							.discount-num {
								width: 182rpx;
								height: 46rpx;
								margin: 0 0 10rpx 20rpx;
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 400;
								display: flex;
								align-items: center;
								background-image: url('/static/discount.png');
								background-size: cover;
								
								.left-text {
									width: 80rpx;
									text-align: center;
									color: #AF21CE;
								}
								
								.right-num {
									width: 102rpx;
									text-align: center;
									color: #FFFFFF;
								}
							}
						}
						
						.progress {
							width: 400rpx;
							line-height: 1;
						}
					}
					
					.bargain-button {
						width: 200rpx;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						color: #ffffff;
						background: linear-gradient(to right, #E55AD6, #AF21CE);
						border-radius: 40rpx;
					}
				}
			}
		}
	}
</style>
